<template>
    <div class="wf-chart-set">

        <dropdown v-if="type !== 'pie'"
                  :option="chartType"
                  @choose="_changeType" />
        <dropdown v-if="type !== 'pie'"
                  :option="rowOption"
                  @choose="_changeRow" />

        <dropdown :option="colOption"
                  changeTitle="'false'"
                  @choose="_changeColumn" />

        <div class="cols">
            <span v-for="col in column"
                  :key="col"
                  @click="removeCol(col)">{{col}}</span>
        </div>

    </div>
</template>

<script>
import setting from "./setting.js";
export default {
    name: "wfChartSet",
    props: {
        list: {
            type: Array,
            default () {
                return [
                    {}
                ]
            }
        },
        type: {
            type: String,
            default: 'bar'
        }
    },
    data () {
        return {
            rowOption: {
                title: "选择x轴字段",
                name: "row",
                list: []
            },
            colOption: {
                title: "选择y轴字段",
                name: "column",
                list: []
            },
            column: []
        };
    },
    watch: {
        list (value) {
            let obj = value[0] || {}
            let map = []
            let colMap = []
            let column = []
            Object.keys(obj).forEach(k => {
                map.push({
                    text: k,
                    value: k
                })
                if (typeof obj[k] === 'number') {
                    column.push(k)
                    colMap.push({
                        text: k,
                        value: k
                    })
                }
            })
            console.log('map所有字段', JSON.stringify(column));
            this.rowOption = {
                title: "选择x轴字段",
                name: "row",
                list: map,
            }
            this.colOption = {
                title: "选择y轴字段",
                name: "column",
                list: colMap,
            }
        }
    },
    computed: {
        chartType: () => {
            return setting.chartType;
        },
    },
    methods: {
        _changeType (res) {
            this.setChange({
                type: res.item.value,
                title: res.item.text
            });
        },
        _changeRow (res) {
            this.setChange({
                row: res.item.value
            });
        },
        removeCol (target) {
            this.column.forEach((col, index) => {
                if (target === col) {
                    this.column.splice(index, 1)
                }
            })
            this.setChange({
                column: this.column,
            });
        },
        _changeColumn (res) {
            let col = res.item.value
            this.column.push(col)
            console.log('add column', col, JSON.stringify(this.column));

            // let legendMap = {};
            // column.forEach(col => {
            //     legendMap[col] = col;
            // });
            this.setChange({
                column: this.column,
            });
        },
        setChange (map = {}) {
            this.$emit("update-chart", map);
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.wf-chart-set {
    width: 100%;
    // background: #f6f6f6;
    height: 100%;
    display: flex;
    align-items: center;

    & > div {
        margin-right: 20px;
    }

    .cols {
        span {
            cursor: no-drop;
            margin-right: 15px;
            font-size: 12px;
            color: #666;
            background: #ddd;
        }
    }
}
</style>
